<template>
    <div>
        <el-table :data="admin" border style="width: 100%" :cell-style="{ height: '65px' }" v-loading="loading">
            <el-table-column prop="id" label="ID" width="200" />
            <el-table-column prop="name" label="名称" width="200" />
            <el-table-column prop="email" label="邮箱" width="250" />
            <el-table-column label="申请时间" width="180">
                <template #default="scope">
                    {{ scope.row.time.slice(0, 16) }}
                </template>
            </el-table-column>
            <el-table-column prop="role" label="角色">
                <template #header>
                    <span>
                        角色
                    </span>
                    <el-select v-model="tableRole" class="m-2" placeholder="Select" size="default">
                        <el-option v-for="item in roles" :key="item" :label="item" :value="item" />
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column prop="role" label="角色管理">
                <template #default="scope">
                    <el-button type="primary" @click="start(scope.row)">修改权限</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <pageComponents @pageChange="handlePageChange" @siezsChange="handleSizesChange" :max=length />
    <el-dialog v-model="dialogVisible" title="权限管理" width="30%" :before-close="handleClose" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <div>
            <el-select v-model="prop.role" class="m-2" placeholder="Select" size="default">
                <el-option v-for="item in rolest" :key="item" :label="item" :value="item" />
            </el-select>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false, save()">
                    保存
                </el-button>
                <el-button @click="dialogVisible = false, getInfo()">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { ref, watch } from 'vue';
import $ from 'jquery';
import { useStore } from 'vuex';
import pageComponents from '@/components/global/pageComponents.vue';
import { ElMessage } from 'element-plus';
export default {
    name: "adminCheckComponents",
    components: {
        pageComponents,
    },
    setup() {
        let admin = ref([]);
        let length = ref("");
        let nowPage = ref(1);
        let nowSizes = ref(10);
        let roles = ref(["所有", "待审核", "管理员", "超级管理员"]);
        let rolest = ref(["待审核", "管理员", "超级管理员"]);
        let tableRole = ref("所有");

        let loading = ref(true);

        let dialogVisible = ref(false);
        const store = useStore();
        watch(tableRole, () => {
            getInfo();
        })
        let getInfo = () => {
            $.ajax({
                type: "post",
                url: "http://124.221.73.180:3001/adminCheck/getAdminList/",
                headers: {
                    "satoken": store.state.admin.token,
                },
                data: {
                    sizes: nowSizes.value,
                    page: nowPage.value,
                    role: tableRole.value,
                },
                success(resp) {
                    loading.value = false;
                    admin.value = resp.admin;
                    length.value = resp.length;
                }
            });
        }
        getInfo();
        let handlePageChange = (t) => {
            nowPage.value = t;
            getInfo();
        }
        let handleSizesChange = (sizes) => {
            nowSizes.value = sizes;
            getInfo();
        }

        let prop = ref();
        let start = (t) => {
            prop.value = t;

            if (store.state.admin.id == t.id) {
                const open4 = () => {
                    ElMessage.error('不能修改自己的权限')
                }
                open4();
            }
            else if (store.state.admin.role == "管理员" && (t.role == "超级管理员" || t.role == "管理员" || t.role == "待审核")) {
                const open4 = () => {
                    ElMessage.error('管理员无法修改权限')
                }
                open4();
            }
            else dialogVisible.value = true;
        }
        let save = () => {
            loading.value = true;
            $.ajax({
                type: "post",
                url: "http://124.221.73.180:3001/adminCheck/changeAdminRole/",
                headers: {
                    "satoken": store.state.admin.token,
                },
                data: {
                    id: prop.value.id,
                    role: prop.value.role,
                },
                success() {
                    loading.value = false
                    getInfo();
                }
            });
        }

        return {
            handlePageChange,
            handleSizesChange,
            getInfo,
            start,
            save,

            loading,
            prop,
            dialogVisible,
            tableRole,
            roles,
            rolest,
            length,
            admin,
        }
    }
}

</script>

<style scoped></style>